<template>
  <div class="view-wrapper">
    <active-account-dialog :corporation="current" @sync-data="doRefresh"></active-account-dialog>
    <el-card>
      <el-form>
        <el-row :gutter="20">
          <!--<el-col :span="2">-->
            <!--<span class="lbl-project pull-left">经营资质:</span>-->
          <!--</el-col>-->
          <!--<el-col :span="4">-->
            <!--<el-form-item>-->
              <!--<el-select style="width: 100%;"></el-select>-->
            <!--</el-form-item>-->
          <!--</el-col>-->
          <el-col :span="2">
            <span class="lbl-project pull-left">审核状态:</span>
          </el-col>
          <el-col :span="4">
            <el-form-item>
              <el-select style="width: 100%;" v-model="searchParams.authStatus">
                <el-option
                v-for="item in authStatusOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="2">
            <span class="lbl-project pull-left">账号状态:</span>
          </el-col>
          <el-col :span="4">
            <el-form-item>
              <el-select style="width: 100%;" v-model="searchParams.status">
                <el-option
                  v-for="item in accountStatusOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <span class="invisible">*</span>
          </el-col>
          <el-col :span="4">
            <el-form-item>
              <el-input placeholder="公司名称" v-model="searchParams.name" @keyup.native.enter="doFilter">
                <template slot="append">
                  <span class="el-icon-search" @click="doFilter"></span>
                </template>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="2">
            <span class="lbl-project pull-left">创建日期:</span>
          </el-col>
          <el-col :span="8">
            <div class="date-picker-wrapper">
              <el-form-item>
                <el-date-picker placeholder="开始日期" v-model="searchParams.beginT"></el-date-picker>
              </el-form-item>
            </div>
            <div class="date-lbl-wrapper">
              <span class="divide-lbl">-</span>
            </div>
            <div  class="date-picker-wrapper">
              <el-form-item>
                <el-date-picker placeholder="结束日期" v-model="searchParams.endT"></el-date-picker>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="14" style="text-align: right">
            <el-button type="primary" style="width: 100px;height: 35px" @click="doFilter">筛选</el-button>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="24">
            <el-table border :data="GetResult" v-loading="loading" element-loading-text="获取数据中..."
                      element-loading-spinner="el-icon-loading" stripe :default-sort = "{prop: 'date', order: 'descending'}">
              <el-table-column align="center"  prop="name" label="公司名称"></el-table-column>
              <el-table-column align="center"   label="管理员">
                <template scope="scope">
                  <span>{{scope.row.manager.name}}</span>
                </template>
              </el-table-column>
              <el-table-column align="center" prop="phone" label="联系电话">
                <template scope="scope">
                  <span>{{scope.row.phone || '未录入'}}</span>
                </template>
              </el-table-column>
              <el-table-column align="center" prop="created_at" sortable label="创建时间" width="120"></el-table-column>
              <el-table-column align="center"  label="审核状态">
                <template scope="scope">
                  <el-tag type="success" v-if="scope.row.status">已通过</el-tag>
                  <el-tag type="danger" v-else="scope.row.status">未通过</el-tag>
                </template>
              </el-table-column>
              <el-table-column align="center"  label="缴纳保证金">
                <template scope="scope">
                  <el-tag type="danger" v-if="scope.row.deposit !== 0 ">未缴纳</el-tag>
                  <el-tag type="success" v-else>已缴纳</el-tag>
                </template>
              </el-table-column>
              <el-table-column align="center"  label="保证金金额">
                <template scope="scope">
                  <el-tag type="danger" v-if="scope.row.deposit == 0">￥{{scope.row.deposit}}</el-tag>
                  <el-tag type="success" v-else>￥{{scope.row.deposit}}</el-tag>
                </template>
              </el-table-column>
              <el-table-column align="center"  label="账户状态">
                <template scope="scope">
                  <el-tag v-if="scope.row.status == 1" type="success">已激活</el-tag>
                  <el-tag v-else>未激活</el-tag>
                </template>
              </el-table-column>
              <el-table-column align="center"  label="操作" width="180">
                <template scope="scope" >
                  <template v-if="scope.row.status == 1">
                    <el-button type="primary" size="small"  @click="goToView(scope.row)">
                      <span class="el-icon-search"></span> 查看
                    </el-button>
                    <el-button type="warning" @click="doFreeze(scope.row)" size="small">
                      <span class="el-icon-delete"></span> 冻结
                    </el-button>
                  </template>
                  <template v-else>
                    <el-button type="primary" size="small" @click="activeAccount(scope.row)">
                      <span class="el-icon-info"></span> 激活
                    </el-button>
                  </template>
                </template>
              </el-table-column>
            </el-table>
            <table-pagination :data-total="searchParams.total" :page-size="searchParams.limit" @size-change="handleSizeChange"  @current-change="handleCurrentChange" :size-options="[5,10,25,50,100]"></table-pagination>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
  </div>
</template>

<script>
  import ActiveAccountDialog from '@/views/dialog/ActiveAccountDialog'
  import TablePagination from '@/components/TablePagination'
  import utils from '@/api/utils'
  export default {
    name: 'Accountant',
    components: {
      TablePagination,
      ActiveAccountDialog
    },
    data: () => ({
      loading: false,
      current: {},
      authStatusOptions: [
        {
          label: '全部',
          value: ''
        },
        {
          label: '通过',
          value: 1
        },
        {
          label: '审核中',
          value: 2
        },
        {
          label: '未通过',
          value: 0
        }
      ],
      accountStatusOptions: [
        {
          label: '全部',
          value: undefined
        },
        {
          label: '未激活',
          value: 0
        },
        {
          label: '已激活',
          value: 1
        }
      ],
      searchParams: {
        total: 0,
        last: '',
        authStatus: '',
        name: '',
        status: undefined,
        limit: 10,
        page: 1,
        beginT: undefined,
        endT: undefined
      },
      result: []
    }),
    mounted () {
      this.doQuery(this.searchParams)
    },
    computed: {
      GetResult () {
        return this.result.filter(c => c.auth_status !== 0)
      }
    },
    watch: {
      'searchParams.authStatus': function (newValue, oldValue) {
        this.doQuery(this.searchParams)
      },
      'searchParams.status': function (newValue, oldValue) {
        this.doQuery(this.searchParams)
      },
      'searchParams.beginT': function (newValue, oldValue) {
        this.doQuery(this.searchParams)
      },
      'searchParams.endT': function (newValue, oldValue) {
        this.doQuery(this.searchParams)
      },
      'searchParams.limit': function (newValue, oldValue) {
        this.doQuery(this.searchParams)
      },
      'searchParams.page': function (newValue, oldValue) {
        this.doQuery(this.searchParams)
      }
    },
    methods: {
      activeAccount (data) {
        this.current = data
        this.$store.commit('TOGGLE_ACTIVE_DIALOG')
      },
      handleSizeChange (data) {
        this.searchParams.limit = data.val
      },
      handleCurrentChange (data) {
        this.searchParams.page = data.val
      },
      doRefresh () {
        this.doQuery(this.searchParams)
      },
      doFilter () {
        if (this.searchParams.name !== this.searchParams.last) {
          this.doQuery(this.searchParams)
          this.searchParams.last = this.searchParams.name
        }
      },
      doFreeze (data) {
        var cId = data.id
        this.$confirm('确定要冻结当前账号吗？', '提示', {
          dangerouslyUseHTMLString: true,
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.loading = true
          utils.authCorporation({
            companyId: cId,
            status: 0
          }).then(res => {
            this.loading = false
            if (res.data.errcode === 0) {
              this.$message({
                type: 'success',
                message: '冻结账号成功!'
              })
              this.doRefresh()
            } else {
              this.$message({
                type: 'error',
                message: res.data.errmsg
              })
            }
          }, () => {
            this.loading = false
            this.$message({
              type: 'error',
              message: '冻结失败!'
            })
          })
        })
      },
      doQuery (params) {
        this.loading = true
        utils.getCompanyList(params).then(res => {
          this.loading = false
          if (res.data.data) {
            this.result = []
            res.data.data.forEach(item => {
              this.result.push(item)
            })
            this.searchParams.total = res.data.meta.pagination.total
          }
        })
      },
      goToView (data) {
        debugger
        this.$router.push({ name: 'InstitutionDetail', params: { cId: data.id } })
      }
    }
  }
</script>

<style scoped lang="scss">
  @import "../../assets/css/mixin";
  .invisible{
    visibility: hidden;
  }

  .date-picker-wrapper{
    width:47%;
    float: left;
  }

  .date-lbl-wrapper{
    float: left;
    width:6%;
    text-align: center;
    color: $font-color;
    line-height: 35px;
  }

</style>
